import React, { useEffect, useState } from 'react'
import { Button, Divider,Modal,message,Form,Input } from 'antd';
import './detail.less'
import $axios from '../../../utils/axios';
import { color } from 'echarts';

///////////////////////////////////////
export default function RecordDetail(props: any) {
    const { currentData,sendData} = props
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [messageApi, contextHolder] = message.useMessage()
    const [isFalse,setIsfalse] = useState(false)
    //当前服务数据
    const [curData, setCurData] = useState<any>([])
    const [detailVisible,setDetailVisible] = useState(true)
    //对应的居民信息
    const [residentData, setResidentData] = useState<any>([])
    //服务信息
    const [serverData,setServerData] = useState<any>({})
    const [label,setLabel] = useState('')
    const getResidentInfo = () => {
        $axios({
            url: '/api/getAllBasicResidentBySearch',
            method: 'POST',
            data: {
                searchKey: currentData.rname
            }
        }).then(res => {
            // console.log('居民信息', res.data);
            setResidentData(res.data[0])
        })
    }
    //获取签约信息
    const getSignById = ()=>{
        $axios({
            url: '/api/getSignById',
            method: 'POST',
            data: {
              id: currentData.id
            }
        }).then(res => {
            // console.log('签约信息', res.data);
            setServerData(res.data)
            setLabel(changeLabelArr(res.data.labelArr)) 
        })
    }
    //点击返回
    const onBack = ()=>{
      setDetailVisible(false)
    }
    //给父组件传值
    sendData({
      isFalse:!detailVisible
    })
    //更新标签
    const changeLabelArr  = (data:any)=>{
        return data.map((item:any,index:number)=>{
            return <span key={index}>
                {item.name}
            </span>
        })
    }
    //控制模态框
    const showModal = () => {
        setIsModalOpen(true)
        setIsfalse(false)
    }
    const showModal2 = ()=>{
        setIsModalOpen(true)
        setIsfalse(true)
    }
    //审核通过
    const handleOk = () => {
        setIsModalOpen(false)
        serverData.status=1
        messageApi.open({
            type: 'success',
            content:'审核成功',
        })
    }
    //驳回
    const handleok2 =()=>{
        setIsModalOpen(false)
        if(isFalse){
            messageApi.open({
                type: 'success',
                content:'驳回成功',
            })
            serverData.status=2
        }
    }
    //提醒支付
    const success = () => {
        messageApi.open({
          type: 'success',
          content:'提醒成功',
        });
    }
    //关闭模态框
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    //点击续约
    const renew = ()=>{
        setDetailVisible(false)
    }
    //驳回原因数据
    const onFinish = (values: any) => {
        console.log('Success:', values);
      };
    //获取年龄
    const getAge = (birthday: string | Date) => {
        return Math.floor((new Date().getTime() - new Date(birthday).getTime()) / 1000 / 60 / 60 / 24 / 365)
    }
    useEffect(() => {
        setCurData(currentData)
        getResidentInfo()
        getSignById()
    }, [])
    ////////////////////////////////////
    return (
        <div style={{ background: '#fff', padding: '20px' }}>
            <h3>签约详情: <span style={{color:'red'}}>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span></h3>
            <Divider />
            <h3>居民信息</h3>
            <div className='box'>
                <div>姓名:<span style={{color:'#1677ff'}}>{residentData?.name}</span></div>
                <div>身份证号:<span>{residentData?.IDCard}</span></div>
                <div>性别:<span>{residentData?.gender ? '女' : '男'}</span></div>
                <div>年龄:<span>{getAge(residentData?.birthday).toString()}</span></div>
                <div>联系电话:<span>{residentData?.tel}</span></div>
                <div>现居地:<span>{residentData?.address}</span></div>
                <div>居民标签:{label}</div>
            </div>
            <Divider />
            <h3>签约信息</h3>
            <div className='box'>
                <div>签约编号:<span>{serverData?.number}</span></div><div>签约状态:<span>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span></div>
                <div>签约机构:<span>{serverData?.organ?.name}</span></div><div>签约团队:<span>{serverData?.team?.name}</span></div>
                <div>签约医生:<span>{serverData?.doctor?.name}</span></div><div>服务包:<span>{serverData?.service?.name}</span></div>
                <div>签约周期:<span>{serverData?.service?.period+'年'}</span></div><div>费用:<span>{'¥'+serverData?.service?.price}</span></div>
                <div>签约类型:<span>{serverData?.type}</span></div><div>申请时间:<span>{serverData?.subscribeTime}</span></div>
                <div>生效日期:<span>{serverData?.takingEffectTime}</span></div><div>签约备注:<span>{serverData?.notes}</span></div>
            </div>
            <Divider />
            <div className='btnTips'>
                <Button type="primary" onClick={renew}>续约</Button>
                <Button onClick={onBack}>返回</Button>
            </div>
        </div>
    )
}